import { memo, FC, useRef, useEffect } from 'react'
import { Modal, Form, Input, message, Select } from 'antd'
import type { FormInstance } from 'antd'
import { Dispatch, IndicatorModelState, connect } from 'umi'
import { getUrlQuery } from '@/utils'
const { Option } = Select
interface IProps {
  visible: boolean
  hide: () => void
  update: () => void
  dispatch: Dispatch
  indicatorModel: IndicatorModelState
  record: any
}
interface FormValues {
  [name: string]: any
}
const EditItem: FC<IProps> = ({
  visible,
  hide,
  dispatch,
  update,
  indicatorModel,
  record
}) => {
  const {
    evaluateType,
    evaluateBody,
    gradeList,
    scoreType,
    pointRule,
    itemInfo
  } = indicatorModel
  const { ruleCode } = getUrlQuery() as { ruleCode: string }
  const formRef = useRef<FormInstance>(null)
  const handleOk = () => {
    formRef.current?.submit()
  }
  const handleCancel = () => {
    hide()
    formRef.current?.resetFields()
  }
  const onFinish = (values: FormValues) => {
    dispatch({
      type: 'indicatorModel/function_saveRuleItemInfo',
      payload: {
        criteriaCode: ruleCode,
        ...values,
        code: record.code,
        parentCode: itemInfo.parentCode
      },
      callback: (response) => {
        if (response.code === 200) {
          message.success('修改成功')
          handleCancel()
          update()
        }
      }
    })
  }

  const getEvaluateType = () => {
    dispatch({
      type: 'indicatorModel/function_getEvaluateType',
      payload: {}
    })
  }

  const getEvaluateBody = () => {
    dispatch({
      type: 'indicatorModel/function_getEvaluateBody',
      payload: {}
    })
  }

  // 查询学段
  const getGradeInfo = () => {
    dispatch({
      type: 'indicatorModel/function_getGradeInfo',
      payload: {}
    })
  }

  //   评分方式
  const getScoringType = () => {
    dispatch({
      type: 'indicatorModel/function_getScoringType',
      payload: {}
    })
  }

  //   获取评分规则
  const getScoreRuleCode = () => {
    dispatch({
      type: 'indicatorModel/function_getScoreRuleCode',
      payload: {}
    })
  }

  const getRuleItemInfoByCode = () => {
    dispatch({
      type: 'indicatorModel/function_getRuleItemInfoByCode',
      payload: {
        ruleCode,
        code: record.code
      }
    })
  }

  useEffect(() => {
    if (visible) {
      getEvaluateType()
      getEvaluateBody()
      getGradeInfo()
      getScoringType()
      getScoreRuleCode()
      getRuleItemInfoByCode()
    }
  }, [visible])
  useEffect(() => {
    if (
      Object.keys(itemInfo).length &&
      evaluateType.length &&
      evaluateBody.length &&
      gradeList.length &&
      scoreType.length &&
      pointRule.length &&
      visible
    ) {
      formRef.current?.setFieldsValue({
        ...record,
        evaluateType: evaluateType.find(
          (item) => item.dictValue === record.type
        )?.dictKey,
        evaluateBody: evaluateBody.find((item) => item.name === record.body)
          ?.code,
        evaluateSource: record.source,
        dataType: itemInfo.dataType,
        grade: itemInfo.grade,
        ruleCode: itemInfo.ruleCode,
        type: itemInfo.type
      })
    }
  }, [evaluateType, evaluateBody, gradeList, scoreType, pointRule, itemInfo])
  return (
    <>
      <Modal
        title="修改指标项"
        open={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        width="40%"
        okText="确认"
        cancelText="取消"
        maskClosable={false}
      >
        <Form
          name="basic"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          autoComplete="off"
          initialValues={{ type: '02' }}
          ref={formRef}
          onFinish={onFinish}
        >
          <Form.Item
            label="指标号"
            name="title"
            rules={[{ required: true, message: '请输入指标号!' }]}
          >
            <Input placeholder="请输入指标号" />
          </Form.Item>
          <Form.Item
            label="名称"
            name="name"
            rules={[{ required: true, message: '请输入指标名称!' }]}
          >
            <Input placeholder="请输入指标名称" />
          </Form.Item>
          <Form.Item
            label="分数"
            name="point"
            rules={[{ required: true, message: '请输入分数!' }]}
          >
            <Input placeholder="请输入分数" />
          </Form.Item>
          <Form.Item label="评价方式" name="evaluateType">
            <Select placeholder="请选择评价方式" allowClear>
              {evaluateType.map((item) => (
                <Option value={item.dictKey} key={item.dictKey}>
                  {item.dictValue}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="评价主体" name="evaluateBody">
            <Select placeholder="请选择评价主体" allowClear>
              {evaluateBody?.map((item) => (
                <Option value={item.code} key={item.code}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="评价依据" name="evaluateSource">
            <Input placeholder="请输入评价依据" />
          </Form.Item>
          <Form.Item label="材料类型" name="dataType">
            <Input placeholder="请输入材料类型" />
          </Form.Item>
          <Form.Item label="学段" name="grade">
            <Select placeholder="请选择学段" allowClear>
              {gradeList.map((item) => (
                <Option value={item.dictKey} key={item.dictKey}>
                  {item.dictValue}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="评分方式" name="type">
            <Select placeholder="请选择评分方式" allowClear>
              {scoreType.map((item) => (
                <Option value={item.dictKey} key={item.dictKey}>
                  {item.dictValue}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="评分规则" name="ruleCode">
            <Select placeholder="请选择评分规则" allowClear>
              {pointRule.map((item) => (
                <Option value={item.dictKey} key={item.dictKey}>
                  {item.dictValue}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}

const mapStateToProps = ({
  indicatorModel
}: {
  indicatorModel: IndicatorModelState
}) => {
  return {
    indicatorModel
  }
}

export default connect(mapStateToProps)(memo(EditItem))
